<html>
    <head>
        <title></title>
        <!-- 方法3：链接样式，推荐 -->
        <link rel="stylesheet" href="style.css"/>
        <!-- 方法2：内嵌样式，不推荐 -->
        <!-- <style type="text/css">
            p {
                color: blue;
            }
            h1 {
                color: gray;
            }
        </style> -->

    </head>
    <body>
        <h1>CSS 层叠样式表</h1>
        <!-- <p style="color: green;">css是用来给html标签添加样式的语言</p> -->
        <!-- 方法1：行内样式，不推荐 -->
        <p>在添加样式之前，需要先获取该标签，比如设置段落为蓝色，标题为灰色</p>
        <hr />

        <div id="selector">
            <h2>标签选择器，设置h2标签为橄榄色</h2>
            <p>标签选择器，显示p标签的原始颜色</p>
            <p>嵌套选择器，设置<span>天气</span>为橙色，嵌套选择器优先级更高</p>
            <p class="one two">类别选择器，设置该标签为黄绿色</p>
            <p id="left">ID选择器，设置该标签为黑色</p>
            <hr />
        </div>

        <div id="poem">
            <h2>静夜思</h2>
            <p>窗前明月光，</p>
            <p>疑是地上霜。</p>
            <p>举头望明月，</p>
            <p>低头思故乡。</p>
            <hr />
        </div>

        <div id="poem2">
            <h2><a href="#">锄禾</a></h2>
            <p>锄禾日当午，</p>
            <p>汗滴禾下土。</p>
            <p>谁知盘中餐，</p>
            <p>粒粒皆辛苦。</p>
            <hr />
        </div>
        <div id="products">
            <h2>推荐商品</h2>
            <ul>
                <li>电视</li>
                <li>笔记本电脑</li>
                <li>吹风机</li>
                <li>手机</li>
            </ul>
            <hr />
        </div>
        <div id="grades">
            <h2>学生成绩表</h2>
            <table>
                <tr><th>序号</th><th>姓名</th><th>科目</th><th>成绩</th></tr>
                <tr><td>1</td><td>小明</td><td>语文</td><td>89</td></tr>
                <tr><td>2</td><td>小三</td><td>数学</td><td>77</td></tr>
            </table>
        </div>
    </body>
</html>